<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <body>

        <ui:composition template="./template.xhtml">

            <ui:define name="title">
                New User
            </ui:define>

            <ui:define name="content">
                <h:form>
                    <table align="center" width="600px">
                        <tr>
                            <td align="center" width="200"></td>
                            <td align="center" width="200"><h3>Add New User</h3></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td colspan="3"><p:messages id="messages" showDetail="true" autoUpdate="true"  globalOnly="true"/></td>
                        </tr>
                        <tr>
                            <td align="center" width="200">Username</td>
                            <td align="left" width="200"><h:inputText id="username" value="#{addUserBean.username}" required="true" requiredMessage="Username invalid !" /></td>
                            <td><p:message for="username" /></td>
                        </tr>
                        <tr>
                            <td align="center" width="200">Fullname</td>
                            <td align="left" width="200"><h:inputText id="fullname" value="#{addUserBean.fullname}" required="true" requiredMessage="Fullname invalid !" /></td>
                            <td><p:message for="fullname" /></td>
                        </tr>
                        <tr>
                            <td align="center" width="200">Gender</td>
                            <td align="left" width="200">
                                <h:selectOneMenu value="#{addUserBean.gender}">
                                    <f:selectItem itemValue="Male" itemLabel="Male"/>
                                    <f:selectItem itemValue="FeMale" itemLabel="FeMale" />
                                </h:selectOneMenu>
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td align="center" width="200">Birth Of Date</td>
                            <td align="left" width="200"><p:calendar id="bod" effect="explode" value="#{addUserBean.dateofbirth}" navigator="true" showButtonPanel="true" required="true" requiredMessage="Select date !" /></td>
                            <td><p:message for="bod" /></td>
                        </tr>
                        <tr>
                            <td align="center" width="200">Phone</td>
                            <td align="left" width="200"><h:inputText id="phone" value="#{addUserBean.phone}" required="true" requiredMessage="Phone invalid !" validatorMessage="Phone must 10 or 11 degit !" >
                                    <f:validateRegex pattern="[0-9]{10,11}" />
                                </h:inputText></td>
                            <td><p:message for="phone" /></td>
                        </tr>
                        <tr>
                            <td align="center" width="200">Email</td>
                            <td align="left" width="200"><h:inputText id="email" value="#{addUserBean.email}" required="true" requiredMessage="Email invalid !" validatorMessage="Email invalid !"  >
                                    <f:validateRegex pattern="[\w\.-]*[a-zA-Z0-9_]@[\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]" />
                                </h:inputText></td>
                            <td><p:message for="email" /></td>
                        </tr>
                        <tr>
                            <td align="center" width="200">Address</td>
                            <td align="left" width="200"><h:inputTextarea id="address" value="#{addUserBean.address}" required="true" requiredMessage="Address invalid !" /></td>
                            <td><p:message for="address" /></td>
                        </tr>
                        <tr>
                            <td align="center" width="200">Role</td>
                            <td align="left" width="200">
                                <h:selectOneMenu value="#{addUserBean.roleID}">
                                    <f:selectItems value="#{addUserBean.roles}" var="role" itemLabel="#{role.roleName}" itemValue="#{role.roleID}" />
                                </h:selectOneMenu>
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td align="center" width="200"></td>
                            <td align="left" width="200"><h:commandButton value="Submit" action="#{addUserBean.resultAdd()}"/></td>
                            <td></td>
                        </tr>
                    </table>
                </h:form>
            </ui:define>

        </ui:composition>

    </body>
</html>
